.processBox {
  border: 1px $border solid;
  display: flex;
  align-items: center;
  padding: 6px;
  background: $bg;
  span {
    text-align: center;
    border: 1px $border solid;
    padding: 6px 12px;
    background: $white;
    border-radius: 2px;
    cursor: pointer;
    &:hover {
      background: $primary;
      border-color: $primary;
      color: $white;
    }
  }
}
.processTag {
  .text-color-info {
    line-height: 28px;
  }
  .processTag-step {
    display: flex;
    flex-wrap: wrap;
    line-height: 28px;
    margin-bottom: 0 !important;
    overflow: hidden;
    .processTag-item {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      dl {
        display: flex;
        border: 1px $border solid;
        border-radius: 2px;
        > * {
          display: flex;
          align-items: center;
          justify-content: center;
        }
        dt {
          width: 30px;
          text-align: center;
          background: $bg;
        }
        dd {
          display: flex;
          align-items: center;
          .el-icon {
            cursor: pointer;
            width: 20px;
            height: 20px;
            display: flex;
            margin-left: 4px;
            margin-right: -4px;
            border-radius: 2px;
            overflow: hidden;
          }
        }
        > * {
          padding: 0 8px;
          &:not(:last-child) {
            border-right: 1px $border solid;
          }
        }
        &:hover {
          border-color: $primary;
          background: $primary;
          color: $white;
          dt {
            background: rgba($color: #fff, $alpha: 0.1);
          }
          dd {
            .el-icon {
              &:hover {
                background: $error;
                color: $white;
              }
            }
          }
          > * {
            &:not(:last-child) {
              border-color: rgba($color: #fff, $alpha: 0.2);
            }
          }
        }
      }
    }
  }
}
